<template>
  <div class="g-nav">
    <div class="warp">
      <ul class="nav">
        <li>
          <router-link to="/Home">
            <em>推荐</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/toplist">
            <em>排行榜</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/playList">
            <em>歌单</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/Djradio">
            <em>主播电台</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/artist">
            <em>歌手</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/album">
            <em>新碟上架</em>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
  <div style="background-color:#f5f5f5;">
    <div class="bd">
      <div class="wrap-l">
        <div class="sbd-lbd">
          <div class="sbd-wrap">
            <div class="info">
              <div class="scover">
                <div class="u-cover">
                  <img class="cov-img"
                    :src="playListInfo? `${playListInfo.coverImgUrl}?param=130y130` : 'https://s4.music.126.net/style/web2/img/default/default_album.jpg?param=130y130'">
                  <span class="msk"></span>
                </div>
              </div>
              <div class="detail">
                <div class="hd">
                  <i class="icon pl"></i>
                  <div class="tit">
                    <h2>{{playListInfo.name}}</h2>
                  </div>
                </div>
                <div class="author">
                  <a href="javascript::" class="user">
                    <img :src="`${playListInfo.creator.avatarUrl}?param=40y40`" alt="">
                  </a>
                  <span class="nickname">
                    <a href="javascript:;" style="color: #0c73c2;">{{playListInfo.creator.nickname}}</a>
                  </span>
                  <p class="time">{{formatTime(playListInfo.createTime)}}创建</p>
                </div>
                <div class="btns">
                  <a @click="play(this.songId)" href="javascript:;" class="btn-2 btn-play" title="播放">
                    <i>
                      <em></em>播放
                    </i>
                  </a>
                  <a @click="addMu(this.songId)" href="javascript:;" class="btn-i btn-add" title="添加到播放列表">
                  </a>
                  <a href="javascript:;" class="btn-i btn-fav">
                    <i>{{(playListInfo.subscribedCount / 10000).toFixed(0) + '万'}}</i>
                  </a>
                  <a href="javascript:;" class="btn-i btn-share">
                    <i>分享</i>
                  </a>
                  <a href="javascript:;" class="btn-i btn-download">
                    <i>下载</i>
                  </a>
                  <a href="javascript:;" class="btn-i btn-cmt">
                    <i>({{playListInfo.commentCount}})</i>
                  </a>
                </div>
                <div class="tags">
                  <span>标签：</span>
                  <a :href="`http://localhost:8080/#/Home/playList?cat=${item}&order=hot`"
                    v-for="(item, i) in playListInfo.tags" :key="i" class="tag">
                    <i>{{item}}</i></a>
                </div>
                <p v-html="playListInfo.description"></p>
              </div>
              <div class="tp-bd">
                <div class="tb-title">
                  <div class="tl">
                    <h3>歌曲列表</h3>
                    <p>{{playListInfo.trackCount + '首歌'}}</p>
                  </div>
                  <div class="tr">
                    播放：
                    <span>{{playListInfo.playCount}}</span>次
                  </div>
                </div>
                <div>
                  <table class="m-table">
                    <thead>
                      <tr>
                        <th></th>
                        <th>
                          <div class="wp">
                            标题
                          </div>
                        </th>
                        <th>
                          <div class="wp">
                            时长
                          </div>
                        </th>
                        <th>
                          <div class="wp">
                            歌手
                          </div>
                        </th>
                        <th>
                          <div class="wp">
                            专辑
                          </div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, i) in playListInfo.tracks" :key="item.id">
                        <td>
                          <span class="num">
                            {{i+1}}
                          </span>
                        </td>
                        <td class="rank">
                          <div class="tt">
                            <span class="play" @click="addmu(item.id)"></span>
                            <a :href="'http://localhost:8080/#/song?id=' + item.id"
                              class="sn overel">{{item.name}}&nbsp;</a>
                          </div>
                        </td>
                        <td class="time">
                          <span>
                            {{showTime(item.dt)}}
                          </span>
                          <div class="options show">
                            <a href="javascript:;" @click="addmu(item.id)" class="icon first"></a>
                            <a href="javascript:;" class="icn i-fav"></a>
                            <a href="javascript:;" class="icn i-share"></a>
                            <a href="javascript:;" class="icn i-dl"></a>
                          </div>
                        </td>
                        <td>
                          <div class="overel">
                            <a :href="'http://localhost:8080/#/songer?id=' + item.ar[0].id">{{item.ar[0].name}}</a>
                          </div>
                        </td>
                        <td>
                          <div class="overel">
                            <a href="javascript:;">{{item.al.name}}</a>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="cmt">
              <HotCmt v-if="curPage==1" :hotComment="hotComments"></HotCmt>
              <NewCmt :commentInfo="comments" :commenttotal="total"></NewCmt>
              <Page :curPage="curPage" :totalPage="totalPage" :midPagesList="midPagesList" @prev="prevPage"
                @next="nextPage" @changeP="changePage"></Page>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap-r"></div>

    </div>
  </div>
</template>

<script>
import page from '../components/Page/page.vue'
import hotcmt from '../components/cmt/hotcmt.vue'
import newcmt from '../components/cmt/newcmt.vue'
export default {
  name: 'playList',
  components: {
    'Page': page,
    'HotCmt': hotcmt,
    'NewCmt': newcmt
  },
  data () {
    return {
      id: this.$route.query.id,
      playListInfo: {},
      hotComments: [],
      comments: [],
      totalPage: 0,
      curPage: 1,
      total: 0,
      midPagesList: []
    }
  },
  methods: {
    async info () {
      const { data: info } = await this.$http.get('playlist/detail', {
        params: {
          id: this.id
        }
      })
      if (info.code == 200) {
        this.playListInfo = info.playlist
        let li = info.playlist.description.split('\n')
        let txt = ''
        li.forEach((e) => {
          txt = txt + e
          txt = txt + '<br />'
        })
        this.playListInfo.description = txt
      }
      const { data: cmt } = await this.$http.get('comment/playlist', {
        params: {
          id: this.id,
          limit: 20,
          offset: (this.curPage - 1) * 20
        }
      })
      if (cmt.code == 200) {
        this.hotComments = cmt.hotComments
        this.comments = cmt.comments
        this.totalPage = Math.ceil(cmt.total / 20)
        this.total = cmt.total
        if (this.totalPage < 8) {
          let li = []
          for (let i = 2; i < this.totalPage; i++) {
            li.push(i)
            this.midPagesList = li
          }
          return
        }
        if (this.curPage <= 5 || this.curPage == 1) {
          this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
          return
        }
        if (this.curPage >= this.totalSongsNum - 4 || this.curPage == this.totalPage) {
          this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
          return
        }
        this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
      }
    },
    formatTime (val) {
      let date = new Date(val)
      let d = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      return d
    },
    // 播放时长处理函数
    showTime (val) {
      let m = Math.floor(val / 1000 / 60)
      let s = Math.floor(val / 1000 % 60)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    async getcmt () {
      const { data: cmt } = await this.$http.get('comment/playlist', {
        params: {
          id: this.id,
          limit: 20,
          offset: (this.curPage - 1) * 20
        }
      })
      if (cmt.code == 200) {
        this.hotComments = cmt.hotComments
        this.comments = cmt.comments
        if (this.totalPage < 8) {
          let li = []
          for (let i = 2; i < this.totalPage; i++) {
            li.push(i)
            this.midPagesList = li
          }
          return
        }
        if (this.curPage <= 5 || this.curPage == 1) {
          this.midPagesList = [2, 3, 4, 5, 6, 7, 8]
          return
        }
        if (this.curPage >= this.totalSongsNum - 4 || this.curPage == this.totalPage) {
          this.midPagesList = [this.curPage - 7, this.curPage - 6, this.curPage - 5, this.curPage - 4, this.curPage - 3, this.curPage - 2, this.curPage - 1]
          return
        }
        this.midPagesList = [this.curPage - 3, this.curPage - 2, this.curPage - 1, this.curPage, this.curPage + 1, this.curPage + 2, this.curPage + 3]
        this.total = cmt.total
      }
    },
    changePage (val) {
      if (this.curPage == val) {
        return
      }
      this.curPage = val;
      this.getcmt();
    },
    prevPage () {
      if (this.curPage == 1) {
        return
      } else {
        this.curPage--
        this.getcmt()
      }
    },
    nextPage () {
      if (this.curPage == this.totalPage) {
        return
      } else {
        this.curPage++
        this.getcmt()
      }
    },
  },
  created () {
    this.info()
  },
  watch: {
    $route (newVal, oldVal) {
      if (newVal.fullPath != oldVal.fullPath) {
        this.id = newVal.query.id
        this.info()
      }
    }
  }
}
</script>

<style lang='less' scoped>
.bd {
  width: 980px;
  margin: 0 auto;
  min-height: 700px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  margin-bottom: 53px;
  &::after {
    content: "";
    clear: both;
    visibility: hidden;
    display: block;
    height: 0;
  }
}
.wrap-l {
  float: left;
  width: 100%;
  margin-right: -270px;
}
.sbd-lbd {
  margin-right: 271px;
}
.wrap-r {
  float: right;
  width: 270px;
}
.info {
  display: flex;
  flex-wrap: wrap;
}
.sbd-wrap {
  padding: 47px 30px 40px 39px;
}
.scover {
  position: relative;
  width: 206px;
  margin-right: 20px;
}
.u-cover {
  width: 200px;
  height: 200px;
  position: relative;
  .cov-img {
    width: 100%;
  }
  .msk {
    top: -4px;
    left: -4px;
    width: 208px;
    height: 208px;
    background-position: 0 -1285px;
  }
}
.detail {
  width: 410px;
}
.hd {
  margin: 0 0 12px;
  line-height: 24px;
  .pl {
    float: left;
    width: 54px;
    height: 24px;
    background-position: 0 -243px;
  }
  .tit {
    float: left;
    margin-left: 14px;
    h2 {
      font-weight: normal;
      font-size: 20px;
    }
  }
  &::after {
    display: block;
    height: 0;
    clear: both;
    content: "";
  }
}
.author {
  margin: 0 0 20px;
  line-height: 35px;
  .user {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    img {
      width: 100%;
      vertical-align: middle;
    }
  }
  .nickname {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    &:hover {
      text-decoration: underline;
    }
  }
  .time {
    display: inline-block;
    color: #999;
    margin-left: 15px;
  }
}
.btns {
  display: flex;
  margin-bottom: 25px;
  margin-right: -10px;
}
.tags {
  margin: 25px 0 5px;
  line-height: 22px;
  span {
    float: left;
    color: #666;
  }
  .tag {
    float: left;
    height: 22px;
    line-height: 22px;
    margin: 0 10px 3px 0;
    padding: 0 10px 0 0;
    background-color: #efefef;
    &:hover {
      background-color: #f3f3f3;
    }
    border-radius: 11px;
    i {
      float: left;
      line-height: 22px;
      height: 22px;
      padding: 0 3px 0 13px;
    }
  }
  &::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
  }
}
.tp-bd {
  thead {
    tr {
      th {
        height: 38px;
        .wp {
          padding: 8px 10px;
          color: #666666;
          background-position: 0 -56px;
          background-repeat: no-repeat;
        }
        &:nth-child(1) {
          width: 77px;
        }
        &:nth-child(3) {
          width: 91px;
        }
        &:nth-child(4) {
          width: 14%;
        }
        &:nth-child(5) {
          width: 20%;
        }
      }
    }
  }
  tbody {
    td {
      padding: 6px 10px;
      line-height: 18px;
      background-color: #f7f7f7;
      &:nth-child(1) {
        width: 77px;
      }
      &:nth-child(2) {
        width: 326px;
      }
      &:nth-child(3) {
        width: 91px;
      }
      &:nth-child(4) {
        width: 26%;
      }
      .num {
        margin-left: 10px;
        color: #666666;
      }
    }
    .rank {
      padding-top: 10px;
      padding-bottom: 10px;
      .lf-bg {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-right: 14px;
        img {
          width: 100%;
        }
      }
      .play {
        float: left;
        margin-right: 8px;
        width: 17px;
        height: 17px;
        background-repeat: no-repeat;
        background-position: 0 -103px;
        cursor: pointer;
        &:hover {
          background-position: 0 -128px;
        }
      }
      .sn {
        float: left;
        max-width: 200px;
        margin-left: 5px;
        &:hover {
          text-decoration: underline;
        }
      }
      p {
        color: #beaebe;
      }
    }
    .options {
      float: left;
      .first {
        width: 13px;
        height: 13px;
        background-position: 0 -700px;
        &:hover {
          background-position: -22px -700px;
        }
      }
      .i-fav {
        background-position: 0 -174px;
        &:hover {
          background-position: -20px -174px;
        }
      }
      .i-share {
        background-position: 0 -195px;
        &:hover {
          background-position: -20px -195px;
        }
      }
      .i-dl {
        background-position: -81px -174px;
        &:hover {
          background-position: -104px -174px;
        }
      }
      a {
        float: left;
        width: 18px;
        height: 16px;
      }
    }
    .show {
      display: none;
    }
    .overel {
      a {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
tbody tr:hover .time span {
  display: none;
}
tbody tr:hover .time .show {
  display: block;
}
.tb-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 31px;
  border-bottom: 2px solid #c20c0c;
  .tl {
    display: flex;
    h3 {
      font-size: 20px;
      font-weight: normal;
    }
    p {
      margin: 9px 0 0 20px;
      color: #666666;
    }
  }
  .tr {
    span {
      font-weight: 600;
      color: #c20c0c;
    }
  }
}
</style> 